<template>
  <div>
    <m-card :title="title" :icon="icon" :imgurl="imgurl">
      <div class="nav jc-between">
        <div class="nav-item" :class="{active:active===i}" v-for="(item,i) in categories" :key="i">
          <div class="nav-link" @click="$refs.list.$swiper.slideTo(i)">{{item.title}}</div>
        </div>
      </div>
      <div class="pt-3">
        <swiper ref="list" :options="swiperCard" @slide-change="()=>active=$refs.list.$swiper.realIndex">
          <swiper-slide v-for="(category,i) in categories" :key="i">
            <slot name="items" :category="category"></slot>
          </swiper-slide>
        </swiper>
      </div>
    </m-card>
  </div>
</template>

<script>
export default {
  props:{
    icon:{type:String,required:true},
    title:{type:String,required:true},
    categories:{type:Array,required:true},
    imgurl:{type:String}
  },
  data() {
    return {
      active:0,
      swiperCard:{
        autoHeight:true
      }
    }
  },
  watch: {
    categories(){
      //console.log('iiii');
      //this.swiperCard.autoHeight=true
      //
    }
  },
  computed: {
    swiper() {
      return this.$refs.list.$swiper.updateSize()
    }
  },
  //页面渲染数据未加载
  created() {
    //console.log(typeof(this.$refs.list))//.$swiper);
    //this.$refs.list.$swiper.updateSize()
    /* this.$refs.list.$swiper.slideTo(1)
    setTimeout(() => {
      this.$refs.list.$swiper.slideTo(0)
    }, 5000); */
  },
  //数据也加载
  mounted() {
    //this.swiperCard.autoHeight=true
  },
};
</script>

<style lang="scss" scoped>
</style>